<template>
  <!-- 头部 -->
  <van-nav-bar title="个人中心" />

  <!-- 用户信息 -->
  <div class="userinfo">
    <van-image class="infoimg" round width="55rem" height="55rem" :src="this.userImg" />
    <div class="a">
      <!-- 保存用户名 -->
      <a v-if="islogin">{{ this.userName }}</a>
      <!-- 当没登录显示  请登录 -->
      <a @click="goLogin" v-if="!islogin">请登录！</a>
    </div>
    <div class="outLogin">
      <a @click="outLogin" v-if="islogin">退出登录</a>
    </div>
  </div>

  <!-- 订单信息 -->
  <div class="order">
    <p>我的订单</p>
    <van-grid :column-num="5" :border="false">
      <van-grid-item v-for="(item, index) in serverList.slice(0, 5)" :key="index" :icon="item.active" :text="item.text"
        @click="ifLoign(item.paths)" style="width: 100%; height: 70rem" />
    </van-grid>
    <hr />
  </div>

  <!-- 核心服务 -->
  <div class="order">
    <p>核心服务</p>
    <van-grid :column-num="5" :border="false">
      <van-grid-item :to="item.path" v-for="(item, index) in serverList.slice(5, 10)" :key="index" :icon="item.active"
        :text="item.text" @click="ifLoign(item.paths)" style="width: 100%; height: 70rem" />
    </van-grid>
    <hr />
  </div>

  <!-- 必备工具 -->
  <div class="order">
    <p>必备工具</p>
    <van-grid :column-num="5" :border="false">
      <van-grid-item v-for="(item, index) in serverList.slice(10, 15)" :key="index" :icon="item.active" :text="item.text"
        @click="ifLoign(item.paths)" style="width: 100%; height: 70rem" />
    </van-grid>
    <hr />
  </div>
</template>

<script>
import { showToast } from "vant";
import { showConfirmDialog } from "vant";
export default {
  name: "my",
  data() {
    return {
      //存储的用户名
      userName: "",
      //存储的头像
      userImg: "",
      userInfo: {},
      //检查是否登录,默认未登录
      islogin: false,
      serverList: [
        {
          text: "待付款",
          active: require("../assets/order-img/待付款.png"),
          paths: "/MyOrders?active=1",
        },
        {
          text: "待发货",
          active: require("../assets/order-img/待发货.png"),
          paths: "/MyOrders?active=2",
        },
        {
          text: "待收货",
          active: require("../assets/order-img/待收货.png"),
          paths: "/MyOrders?active=3",
        },
        {
          text: "待评价",
          active: require("../assets/order-img/待评价.png"),
          paths: "/MyOrders?active=4",
        },
        {
          text: "售后",
          active: require("../assets/order-img/售后.png"),
          paths: null,
        },
        {
          text: "优惠券",
          active: require("../assets/serve-img/优惠券.png"),
          paths: "coupon",
        },
        {
          text: "商品收藏",
          active: require("../assets/serve-img/商品收藏.png"),
          paths: "shoppingCollect",
        },
        {
          text: "浏览足迹",
          active: require("../assets/serve-img/足迹.png"),
          paths: "footprint",
        },
        {
          text: "我的拼团",
          active: require("../assets/serve-img/拼团.png"),
          paths: null,
        },
        {
          text: "地址管理",
          active: require("../assets/serve-img/地址管理.png"),
          paths: "address",
        },
        {
          text: "绑定手机",
          active: require("../assets/tool-img/绑定手机.png"),
          paths: null,
        },
        {
          text: "帮助中心",
          active: require("../assets/tool-img/帮助中心.png"),
          paths: null,
        },
        {
          text: "意见反馈",
          active: require("../assets/tool-img/意见反馈.png"),
          paths: null,
        },
        {
          text: "联系客服",
          active: require("../assets/tool-img/联系客服.png"),
          paths: null,
        },
        {
          text: "关于我们",
          active: require("../assets/tool-img/关于我们.png"),
          paths: null,
        },
      ],
    };
  },
  methods: {
    goLogin() {
      // debugger
      if (!this.islogin) {
        this.$router.push("/Login");
      } else {
        showToast("已登录,不用再登录了");
      }
    },
    outLogin() {
      showConfirmDialog({
        message: "是否退出登录",
      })
        .then(() => {
          //清除全部token
          localStorage.clear();
          showToast("退出登录");
          this.$router.push("/Login");
          this.islogin == false;
        })
        .catch(() => {
          showToast("取消退出");
        });
    },
    //没有登录不给查看信息
    ifLoign(paths) {
      if (this.islogin && paths != null) {
        if (paths == "coupon" || paths == "address") {
          this.$store.commit("setValue", {
            key: "states",
            value: 0,
          });
          this.$store.commit("setValue", {
            key: "total",
            value: 0,
          });
        }
        this.$router.push(paths);
      } else if (!this.islogin) {
        // console.log(this.islogin);
        showToast("未登录,不可查看个人信息");
      } else {
        showToast("尚未开发,请联系管理员");
      }
    },
  },
  //我的页面 一加载就立马拿到本地存储的数据
  //并且把它赋值到data里面
  //再渲染到页面
  mounted() {
    // debugger
    let user = JSON.parse(localStorage.getItem("userInfo"));
    if (localStorage.getItem("token")) {
      this.islogin = true;
      // this.userInfo =user.userInfo.userName;
      //存储用户名
      this.userName = user.userInfo.username;
      //存储用户头像
      this.userImg = user.userInfo.avatar;
      // showToast("已登录");
    } else {
      this.islogin = false;
      showToast("没有登录，请登录");
      // console.log(localStorage.getItem("token"));
    }
    //  this.userInfo = JSON.parse(localStorage.getItem("token"));
  },
};
</script>

<style scoped>
html {
  font-size: 0.2666vw;
}

.userinfo {
  background-color: rgb(171, 149, 109);
  width: 100%;
  height: 80rem;
}

.infoimg {
  height: 50rem;
  width: 50rem;
  margin: 20rem;
}

.a {
  margin-top: -75rem;
  margin-left: 70rem;
  font-size: 18rem;
  padding: 10rem;
  color: pink;
}

.outLogin {
  width: 100%;
  text-align: center;
  margin-top: 500rem;
  font-size: 20rem;
  background-color: rgb(197, 196, 196, 0.8);
  border-radius: 100rem;
}

.order p {
  background-color: #f8f8f8;
  padding-left: 15rem;
  font-size: 18rem;
}
</style>